[Portal] Migrate Hooks page to Radix UI with tab navigation#5761
Closed
jimmycwc wants to merge 10 commits into
Closed
[Portal] Migrate Hooks page to Radix UI with tab navigation#5761jimmycwc wants to merge 10 commits into
jimmycwc wants to merge 10 commits into
Conversation
Add password type and plain suffix support on TextField, optional labelSize on FormField, and match disabled SecondaryButton styling to the design system. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce a floating save bar aligned to content width, with discard confirmation and Storybook coverage. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace the enable toggle with provider cards, adopt v2 form controls and SaveFunctionBar, update typography and spacing to match design, and swap provider logos to SVG assets. Co-authored-by: Cursor <cursoragent@cursor.com>
Use v2 components for Admin API Configuration screen and make the keys table horizontally scrollable on narrow viewports. Co-authored-by: Cursor <cursoragent@cursor.com>
Use ConfirmationDialog for SaveFunctionBar, FormContainer reset, and navigation blocker flows. Raise dialog overlay z-index so Monaco editor UI does not paint above the modal mask. Co-authored-by: Cursor <cursoragent@cursor.com>
Document default, checked, with-text, and disabled Toggle variants. Co-authored-by: Cursor <cursoragent@cursor.com>
Refactor Account Deletion, Account Anonymization, Cookie Lifetime, Endpoint Direct Access, SMTP, SMS Provider, Admin API, Edit Config, and SAML Certificate to v2 layout patterns with SaveFunctionBar. Align content width to Admin API grid span 9 and add page descriptions. Co-authored-by: Cursor <cursoragent@cursor.com>
Use inline path elements instead of a base64 PNG for sharper rendering. Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace Fluent UI components with Radix UI equivalents (Text, Select, TextField, ConfirmationDialog, IconButton, Tooltip) - Introduce tab-based navigation (Blocking Events, Non-blocking Events, Hook Settings, Webhook Signature) using Radix Themes Tabs - Apply two-column section layout (left: label, right: content) inside each tab panel, matching other advanced settings pages - Style Blocking Hooks table to match Admin API keys table pattern (gray-a2 row backgrounds, border-top separators, semibold headers, horizontal scroll wrapper with min-width enforcement) - Switch ScreenContent to list layout for responsive full-width grid - Update Webhook Signature secret key input to use embedded reveal/copy icon buttons in TextField suffix, matching SMS Provider screen style Co-authored-by: Cursor <cursoragent@cursor.com>
…ration screens - Deleted the contentWidthAnchor CSS class from Account Anonymization, Account Deletion, Cookie Lifetime, Edit, Endpoint Direct Access, SAMLCertificate, SMS Provider, and SMTP configuration screens. - Updated corresponding TSX files to remove references to the now-removed class, ensuring cleaner code and improved maintainability.
Member
|
@jimmycwc this PR should not contain the Hook page changes |
5 tasks
Member
|
Gonna close this one and move it to #5771 — same Advanced-settings migration, just minus the Hooks page and with the review fixes + CI green. We can do Hooks in its own PR. 🙏 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
TextField, optionallabelSizeonFormField, and match disabled state styling onSecondaryButtonSaveFunctionBar— New floating save bar component aligned to content width with discard confirmation dialog and Storybook coverageRadioCards), adopt v2 form controls andSaveFunctionBar, update typography/spacing, and swap provider logos to inline SVG assetsAdminAPIConfigurationScreento v2 components; make the API keys table horizontally scrollable on narrow viewports with a hidden-scrollbar wrapper; introduceConfirmationDialogv2 componentConfirmationDialogforSaveFunctionBar,FormContainerreset, and navigation blocker flows; raise dialog overlay z-index so Monaco editor UI does not paint above the modal maskSaveFunctionBar, align content width togrid-column: 1 / span 9, and add missing page descriptionsTest plan
SaveFunctionBarappears when there are unsaved changes and the discard confirmation dialog works across all migrated screensConfirmationDialogand render above the Monaco editorcd portal && npm run typecheck— must pass cleanMade with Cursor